<template>
  <van-popup v-model:show="showComment" round position="bottom" style="height: 80%">
    <aster-comment
      :data="commentData"
      :user="currentUser"
      :props="commentProps"
      :before-submit="submit"
      :before-like="like"
      :before-delete="deleteComment"
      :upload-img="uploadImg"
      @input="updateData"
    />
  </van-popup>
</template>
<script setup lang="ts">
  import AsterComment from '@/components/comment/index.vue';
  import { onMounted, ref } from 'vue';
  import { useUserStore } from '@/store/modules/user';
  import {
    commentAddApi,
    commentDeleteApi,
    commentLikeApi,
    commentTreeApi,
  } from '@/api/workflow/comment';
  import { uploadFile } from '@/utils/fileUtils';

  // 用户store
  const userStore = useUserStore();

  const props = defineProps({
    procInstId: {
      type: String,
      default: '',
    },
  });

  /** 显示组件 */
  const showComment = ref();
  /** 评论组件所需配置 */
  const commentProps = {
    id: 'id',
    content: 'content',
    imgSrc: 'imgSrc',
    children: 'children',
    likes: 'likes',
    liked: 'liked',
    reply: 'reply',
    createAt: 'createTime',
    user: 'user',
  };
  /** 评论数据 */
  const commentData = ref<Comment.CommentInfo[]>([]);
  /** 当前用户 */
  const currentUser = ref<{ id: string; name: string; avatar: string; isSuperAdmin: boolean }>({
    id: '',
    name: '',
    avatar: '',
    isSuperAdmin: false,
  });

  /**
   * 提交评论
   * @param newComment 新评论
   * @param parent 父级评论
   * @param add 添加评论
   */
  const submit = async (newComment, parent, add) => {
    console.log('submit--->');
    const addComment: Comment.CommentInfo = {
      content: newComment.content,
      parentId: parent ? parent.id : '0',
      replyId: newComment.reply ? newComment.reply.id : null,
      belongId: props.procInstId,
      imgSrc: newComment.imgSrc,
    };
    commentAddApi(addComment).then(({ data }) => {
      add(Object.assign(newComment, { _id: data }));
      console.log('addComment---success->', data);
    });
  };

  /**
   * @description 点赞
   * @param {*} comment 评论
   */
  const like = async (comment: Comment.CommentInfo) => {
    const params: Comment.CommentLike = {
      belongId: props.procInstId,
      commentId: comment.id!,
      liked: !comment.liked,
    };
    commentLikeApi(params).then(({ data }) => {
      console.log('like---success->', data);
    });
  };

  /**
   * @description 上传图片
   * @param {*} file 文件
   * @param {*} callback 回调
   */
  const uploadImg = async ({ file, callback }) => {
    uploadFile(file, (data) => {
      callback(data.url);
    });
  };
  /**
   * @description: 删除评论
   * @param {*} comment 评论
   * @param {*} parent 父级评论
   * @return {*}
   */
  const deleteComment = async (comment, parent) => {
    commentDeleteApi([comment.id]).then(({ data }) => {
      console.log('deleteComment---success->', data);
    });
  };

  /**
   * @description: 更新评论数据
   * @return {*}
   */
  const updateData = (res) => {
    commentData.value = res;
  };

  /**
   * @description: 查询评论数据
   * @return {*}
   */
  const handleQuery = () => {
    commentTreeApi(props.procInstId).then(({ data }) => {
      commentData.value = data;
    });
  };

  /**
   * @description: 显示评论组件
   * @param {*} visible 显示
   * @return {*}
   */
  const init = (visible: boolean) => {
    showComment.value = visible;
  };

  onMounted(() => {
    // 当前用户信息
    currentUser.value = {
      id: userStore.userInfo.id,
      name: userStore.displayName(),
      avatar: userStore.userInfo.avatar ? userStore.userInfo.avatar : '',
      isSuperAdmin: userStore.isSuperAdmin(),
    };
    // 查询评论数据
    handleQuery();
  });

  defineExpose({
    init,
  });
</script>
<style scoped lang="scss"></style>
